<template>
  <div>
    <header>
      用户名：
      <el-input
        size="small"
        v-model="username"
        @keyup.enter="getRecord"
      ></el-input>
      <el-button type="primary" @click="getRecord">搜索</el-button>
    </header>
    <section class="user-list">
      <el-table
        :data="userList"
        border
        fit
        style="width:100%"
        >
        <el-table-column prop="fuid" label="ID"/>
        <el-table-column prop="cU_ser" label="用户名"/>
        <el-table-column prop="ftzze" label="投资总额"/>
        <el-table-column>
          <el-button type="text">查看</el-button>
        </el-table-column>
      </el-table>
    </section>
    <section class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="page"
        @current-change = 'getRecord'
      >
      </el-pagination>
    </section>
  </div>
</template>
<script>
  export default {
    // beforeMount() {
    //   this.$emit('onCustomStyle', {
    //     border: 'none',
    //     overflowY: 'auto',
    //     background: '#f5f8fb'
    //   })
    // },
    data() {
      return {
        username: '',
        userList: [],
        total: 0,
        page: 1
      }
    },
    activated(){
      this.customStyle()
    },
    mounted() {
      this.getRecord();
      this.customStyle()
    },
    methods: {
      customStyle(){
        this.$emit('onCustomStyle',{
          border: 'none',
          overflowY: 'auto',
          background: '#f5f8fb'
        })
      },
      async getRecord() {
        let {data} = await this.$get(
          this,{
            api: '/data/loadZhList.do',
            data: {
              kfid: this.$route.params.kfid,
              pageSize: 10,
              page: this.page,
              username: this.username,
              dt1: this.$route.params.dt
            }
          }
        );
        if (data.state == 0) {
          this.userList = data.content.data;
          // this.userList = [
          //   {
          //     ftzze: 1000,
          //     fuid: 123,
          //     cU_ser: 'test'
          //   }, {
          //     ftzze: 1000,
          //     fuid: 123,
          //     cU_ser: 'noclip'
          //   }
          // ]
          this.total = data.content.num;
          // this.total = 100;
        }
      }
    }
  }
</script>
<style>
  .el-input{
    width: 180px;
  }
  .user-list{
    margin: 24px 0;
  }
  .pagination{
    text-align: center;
  }
</style>
